<link rel="stylesheet" href="/static/admin/video/main.css">
<link rel="stylesheet" type="text/css" href="/static/admin/video/webuploader.css"/>
<style type="text/css">
    .progress-bar {
        float: left;
        height: 100%;
        font-size: 10px !important;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: #0db3a2;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        transition: width .6s ease;
    }

    #picker {
        width: 80px !important;
        height: 31px !important;
        margin-bottom: 20px;
    }

    .webuploader-pick {
        font-size: 10px !important;
        position: relative;
        display: inline-block;
        cursor: pointer;
        background: #391ab3;
        /*padding: 10px 15px;*/
        width: 70px !important;
        height: 31px !important;
        line-height: 31px !important;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;

    }

    #ctlBtn {
        font-size: 10px !important;
        width: 70px !important;
        height: 31px !important;
        line-height: 31px !important;
        background: #0db3a2;
        color: #fff;
        text-align: center !important;
        border-radius: 3px;
        overflow: hidden;
        cursor: pointer !important;
    }


    .stop-btn {
        color: red !important;
    }

    #picker {
        margin-bottom: 10px !important;
    }

    #thelist {
        height: auto;
        margin-bottom: 10px !important;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .sideBlock {
        padding: 24px;
    }

    .layui-form-item .layui-input-inline {
        width: auto;
    }

    .layui-input，.layui-select，.layui-textarea {
        height: 36px;
    }

    .layui-form-label {
        padding: 8px 15px;
    }

    .layui-form-switch {
        height: 34px;
        line-height: 34px;
        margin-top: 0;

    }

    .layui-form-switch i {
        width: 24px;

    }

    .layui-form-onswitch i {
        margin-left: -28px;

    }

    .layui-form-switch em {
        margin-left: 27px;
    }

    .layui-form-onswitch em {
        margin-left: 5px;
    }

    .layui-btn {
        height: 36px;
    }

    .layui-form-select dl dd.layui-this {
        background-color: #02a7f0;
    }

    .layui-btn-blue {
        background-color: #02a7f0;
    }

    .layui-form-onswitch {
        border-color: #02a7f0;
        background-color: #02a7f0;
    }

    .layui-form-radio > i:hover, .layui-form-radioed > i {
        color: #02a7f0;
    }

    .layui-form-checked [lay-skin = primary] i {
        border-color: #02a7f0;
        background-color: #02a7f0;
    }

    .layui-form-checkbox [lay-skin = primary]:hover i {
        border-color: #02a7f0;
    }

    .dotRed {
        color: #ff3100;
    }

    .mt32 {
        margin-top: 32px;
    }

    .formList .layui-form-label {
        padding-right: 0;
    }

    .formList .layui-input-block {
        margin-left: 100px;
    }
</style>
<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin"
     style="padding: 10px 10px 10px 10px;">
    <div class="layui-form-item">
        <label class="layui-form-label">节点</label>
        <div class="layui-input-block" id="permission-select-dom"></div>
    </div>
    <div class="layui-form-item">
        <div id="uploadfile">
            <div id="picker">选择文件</div>
            <!--用来存放文件信息-->
            <div id="thelist" class="uploader-list">
                <table class="table" border="1" cellpadding="0" cellspacing="0" width="100%"
                       style=" font-size: 10px !important;">
                    <tr class="filelist-head">
                        <th class="file-name">名称</th>
                        <th class="file-size">大小</th>
                        <th class="file-pro">进度</th>
                        <th class="file-status">状态</th>
                        <th class="file-manage">操作</th>
                    </tr>
                </table>
            </div>
            <div id="ctlBtn">开始上传</div>
        </div>
    </div>
</div>
<script type="text/html" id="permission-select">
    <select name="pid" id="pid" lay-filter="type">
        {{# layui.each(d.list, function(index, item) { }}
        <option value="{{item.value}}">{{item.name}}</option>
        {{# });}}
    </select>
</script>
<script src="/static/admin/video/jquery.js"></script>
<script src="/static/admin/video/dist/webuploader.js"></script>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'form', 'upload', 'authtree', 'laytpl'], function () {
        var $ = layui.jquery, form = layui.form
            , upload = layui.upload, authtree = layui.authtree, laytpl = layui.laytpl
        $.ajax({
            url: "{:url('file/select')}",
            dataType: 'json',
            success: function (data) {
                var selectList = authtree.treeConvertSelect(data.trees, {
                    childKey: 'list',
                    primaryKey: 'id',
                    parentKey: 'parent_id',
                });
                laytpl($('#permission-select').html()).render({
                    list: selectList,
                }, function (html) {
                    $('#permission-select-dom').append(html);
                });
                form.render('select');

            }
        });
        _extensions = '3gp,mp4,rmvb,mov,avi,m4v';
        _mimeTypes = 'video/*,audio/*,application/*';
        $(function () {
            var chunkSize = 500 * 1024;        //分块大小
            var uniqueFileName = null;          //文件唯一标识符
            var md5Mark = null;
            //视频上传 start
            var $list = $('#thelist .table'),
                $btn = $('#ctlBtn');
            var uploader = WebUploader.create({
                swf: '/static/admin/video/dist/Uploader.swf',
                server: "{:url('file/cut_upload')}",
                pick: '#picker', // 选择文件的按钮。可选
                chunked: true,//开始分片上传
                chunkSize: 2097152,//每一片的大小
                compress: false,
                prepareNextFile: true,
                threads: true,
                duplicate: true,
                accept: {
                    title: '多文件上传',
                    extensions: '*',
                    mimeTypes: 'file/*'
                },
            });
            uploader.on("fileQueued", function (file) {
                $list.append('<tr id="' + file.id + '" class="file-item">' + '<td class="file-name">' + file.name + '</td>' + '<td class="file-size">' +
                    (file.size / 1024).toFixed(1) + 'KB' + '</td>' + '<td class="file-pro">0%</td>' + '<td class="file-status">等待上传</td>' + '<td width="20%" class="file-manage"><a class="stop-btn" href="javascript:;">暂停</a><a class="remove-this" href="javascript:;">取消</a></td>' + '</tr>');
                //暂停上传的文件
                $list.on('click', '.stop-btn', function () {
                    uploader.stop(true);
                })
                //删除上传的文件
                $list.on('click', '.remove-this', function () {
                    if ($(this).parents(".file-item").attr('id') == file.id) {
                        uploader.removeFile(file);
                        $(this).parents(".file-item").remove();
                    }
                });
            });
            //重复添加文件
            var timer1;
            uploader.onError = function (code) {
                clearTimeout(timer1);
                timer1 = setTimeout(function () {
                    layer.msg('该文件已存在');
                }, 250);
            }
            // 文件上传过程中创建进度条实时显示
            uploader.on('uploadProgress', function (file, percentage) {
                $("td.file-pro").text("");
                var $li = $('#' + file.id).find('.file-pro'),
                    $percent = $li.find('.file-progress .progress-bar');
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="file-progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>' + '<br/><div class="per">0%</div>').appendTo($li).find('.progress-bar');
                }

                $li.siblings('.file-status').text('上传中');
                $li.find('.per').text((percentage * 100).toFixed(2) + '%');
                $percent.css('width', percentage * 100 + '%');

            });
            // 文件上传成功
            uploader.on('uploadSuccess', function (file, response) {
                $('#' + file.id).find('.file-status').text('已上传');
                var pid = $('#pid').val(); //项目
                var file_name = file.name; //文件名称
                var file_size = file.size; //文件大小
                var file_path = response['filePath']; //文件路径
                var file_ext = file.ext;
                $.ajax({
                    url: "{:url('file/add')}",
                    data: {
                        'file_type_id': pid,
                        'name': file_name,
                        'size': file_size,
                        'path': file_path,
                        'suffix': file_ext,
                    },
                    type: 'post',
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1, time: 1500, shade: 0.1}, function (index) {
                                parent.location.reload(); //数据刷新
                                layer.close(index); //关闭弹层
                            });
                        }
                    }
                });

            });
            uploader.on('uploadFinished', function (file) {
                layer.msg("上传成功！", {icon: 1, time: 1500, shade: 0.1}, function (index) {
                    parent.location.reload(); //数据刷新
                    layer.close(index); //关闭弹层
                });
            });


            // 文件上传失败，显示上传出错
            uploader.on('uploadError', function (file) {
                $('#' + file.id).find('.file-status').text('上传出错');
            });
            // 完成上传完后将视频添加到视频列表，显示状态为：转码中
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.file-progress .progress-bar').fadeOut();
            });
            $btn.on('click', function () {
                if ($(this).hasClass('disabled')) {
                    return false;
                }
                uploader.upload();
            });
        });
    });
</script>